<template>
  <el-main class="transportation-fee-main">
    <div class="main-container">
      <el-row :gutter="20">
        <el-col :span="24">
          <!-- 查询表单区域 -->
          <el-card class="search-card" shadow="hover">
            <el-form :inline="true" :model="queryParams" ref="queryForm" class="search-form">
              <el-form-item label="最小重量">
                <el-input-number
                  v-model="queryParams.minWeight"
                  :precision="2"
                  :step="1"
                  :min="0"
                  placeholder="最小重量"
                  style="width: 160px"
                />
              </el-form-item>
              <el-form-item label="最大重量">
                <el-input-number
                  v-model="queryParams.maxWeight"
                  :precision="2"
                  :step="1"
                  :min="0"
                  placeholder="最大重量"
                  style="width: 160px"
                />
              </el-form-item>

              <el-form-item class="search-buttons">
                <el-button type="primary" @click="handleQuery" class="search-btn" :icon="Search">
                  查询
                </el-button>
                <el-button @click="resetQuery" class="reset-btn" :icon="Refresh">
                  重置
                </el-button>
                <el-button type="success" @click="handleAdd" class="add-btn" :icon="Plus">
                  新增
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 表格区域 -->
          <el-card class="table-card" shadow="hover">
            <el-table
              v-loading="loading"
              :data="transportationFeeList"
              border
              :height="tableHeight"
              class="data-table"
              highlight-current-row
            >
              <el-table-column type="index" label="序号" width="70" align="center"/>
              <el-table-column prop="minWeight" label="最小重量(kg)" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="maxWeight" label="最大重量(kg)" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="minHeight" label="最小高度(m)" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="maxHeight" label="最大高度(m)" min-width="120" align="center" show-overflow-tooltip />
              <el-table-column prop="price" label="运输费价格(元)" min-width="150" align="center" show-overflow-tooltip />
              <el-table-column label="操作" width="160" fixed="right" align="center">
                <template #default="scope">
                  <div class="action-buttons">
                    <el-button type="primary" size="small" :icon="Edit" @click="handleUpdate(scope.row)">
                      编辑
                    </el-button>
                    <el-button type="danger" size="small" :icon="Delete" @click="handleDelete(scope.row)">
                      删除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
              v-model:current-page="queryParams.current"
              v-model:page-size="queryParams.size"
              :page-sizes="[10, 20, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              class="pagination"
              @size-change="getList"
              @current-change="getList"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 添加或修改堆垛机运输费对话框 -->
    <el-dialog 
      :title="title" 
      v-model="open" 
      width="700px" 
      append-to-body
    >
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="最小重量" prop="minWeight">
              <el-input-number 
                v-model="form.minWeight" 
                placeholder="请输入最小重量" 
                :precision="2"
                :step="1"
                :min="0"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大重量" prop="maxWeight">
              <el-input-number 
                v-model="form.maxWeight" 
                placeholder="请输入最大重量" 
                :precision="2"
                :step="1"
                :min="0"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="最小高度" prop="minHeight">
              <el-input-number 
                v-model="form.minHeight" 
                placeholder="请输入最小高度" 
                :precision="2"
                :step="0.1"
                :min="0"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大高度" prop="maxHeight">
              <el-input-number 
                v-model="form.maxHeight" 
                placeholder="请输入最大高度" 
                :precision="2"
                :step="0.1"
                :min="0"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
                <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="运输费价格" prop="price">
              <el-input-number 
                v-model="form.price" 
                placeholder="请输入运输费价格" 
                :precision="2"
                :step="1"
                :min="0"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-main>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
import { 
  getDeviceStackerCraneTransportationFeeList, 
  getDeviceStackerCraneTransportationFeeDetail, 
  addDeviceStackerCraneTransportationFee, 
  updateDeviceStackerCraneTransportationFee, 
  deleteDeviceStackerCraneTransportationFee 
} from '@/api/deviceStackerCraneTransportationFee/index'
import type { DeviceStackerCraneTransportationFee, DeviceStackerCraneTransportationFeeQuery } from '@/api/deviceStackerCraneTransportationFee/type'
import { Search, Refresh, Plus, Edit, Delete } from '@element-plus/icons-vue'

// 遮罩层
const loading = ref(true)
// 总条数
const total = ref(0)
// 运输费表格数据
const transportationFeeList = ref([])
// 弹出层标题
const title = ref('')
// 是否显示弹出层
const open = ref(false)
// 表格高度自适应
const tableHeight = ref(0)

// 查询参数
const queryParams = reactive<DeviceStackerCraneTransportationFeeQuery>({
  current: 1,
  size: 10,
  minWeight: undefined,
  maxWeight: undefined,
  minHeight: undefined,
  maxHeight: undefined,
  price: undefined
})

// 表单参数
const form = reactive<DeviceStackerCraneTransportationFee>({
  id: undefined,
  minWeight: undefined,
  maxWeight: undefined,
  minHeight: undefined,
  maxHeight: undefined,
  price: undefined
})

// 表单校验
const rules = {

  price: [
    { required: true, message: '运输费价格不能为空', trigger: 'blur' }
  ]
}

const queryForm = ref<FormInstance>()
const formRef = ref<FormInstance>()

// 设置表格高度
const handleResize = () => {
  nextTick(() => {
    tableHeight.value = window.innerHeight - 260
  })
}

onMounted(() => {
  getList()
  handleResize()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

// 查询堆垛机运输费列表
const getList = () => {
  loading.value = true
  getDeviceStackerCraneTransportationFeeList(queryParams).then((res: any) => {
    transportationFeeList.value = res.data.records
    total.value = res.data.total
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

// 搜索按钮操作
const handleQuery = () => {
  queryParams.current = 1
  getList()
}

// 重置按钮操作
const resetQuery = () => {
  queryForm.value?.resetFields()
  Object.assign(queryParams, {
    current: 1,
    size: 10,
    minWeight: undefined,
    maxWeight: undefined,
    minHeight: undefined,
    maxHeight: undefined,
    price: undefined
  })
  getList()
}

// 新增按钮操作
const handleAdd = () => {
  reset()
  open.value = true
  title.value = '添加堆垛机运输费'
}

// 修改按钮操作
const handleUpdate = (row: DeviceStackerCraneTransportationFee) => {
  reset()
  const id = row.id
  getDeviceStackerCraneTransportationFeeDetail(id!).then((res: any) => {
    Object.assign(form, res.data)
    open.value = true
    title.value = '修改堆垛机运输费'
  })
}

// 提交按钮
const submitForm = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      if (form.id != undefined) {
        updateDeviceStackerCraneTransportationFee(form).then(() => {
          ElMessage.success('修改成功')
          open.value = false
          getList()
        })
      } else {
        addDeviceStackerCraneTransportationFee(form).then(() => {
          ElMessage.success('新增成功')
          open.value = false
          getList()
        })
      }
    }
  })
}

// 删除按钮操作
const handleDelete = (row: DeviceStackerCraneTransportationFee) => {
  const ids = row.id
  ElMessageBox.confirm('是否确认删除堆垛机运输费编号为"' + ids + '"的数据项？')
    .then(() => {
      return deleteDeviceStackerCraneTransportationFee(ids!)
    })
    .then(() => {
      getList()
      ElMessage.success('删除成功')
    })
    .catch(() => {})
}

// 表单重置
const reset = () => {
  Object.assign(form, {
    id: undefined,
    minWeight: undefined,
    maxWeight: undefined,
    minHeight: undefined,
    maxHeight: undefined,
    price: undefined
  })
  formRef.value?.resetFields()
}

// 取消按钮
const cancel = () => {
  open.value = false
  reset()
}
</script>

<style lang="scss" scoped>
.transportation-fee-main {
  padding: 20px;

  .search-card {
    margin-bottom: 20px;
  }

  .table-card {
    .pagination {
      margin-top: 20px;
      text-align: right;
    }
  }
}

.dialog-footer {
  text-align: right;
}
</style>
